<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>
<head>
<title>管理平台</title>
<jsp:include page="../../../include/header.jsp"></jsp:include>
<!-- jquery tree table -->
<link
	href='${BASE_PATH}/static/plugins/jquery-treetable/css/jquery.treetable.css'
	media='all' rel='stylesheet' type='text/css' />


<style type="text/css">
.chooseBtn {
	display: none;
}

.choose-label {
	box-shadow: #ccc 0px 0px 0px 1px;
	width: 40px;
	height: 20px;
	display: inline-block;
	border-radius: 20px;
	position: relative;
	background-color: #bdbdbd;
	overflow: hidden;
}

.choose-label:before {
	content: '';
	position: absolute;
	left: 0;
	width: 20px;
	height: 20px;
	display: inline-block;
	border-radius: 20px;
	background-color: #fff;
	z-index: 20;
	-webkit-transition: all 0.5s;
	transition: all 0.5s;
}

.chooseBtn:checked+label.choose-label:before {
	left: 20px;
}

.chooseBtn:checked+label.choose-label {
	background-color: #51ccee;
}
</style>
</head>
<body>
	<div id="wrapper"  class="row">
		
			
					<h1 class="page-header">亿品</h1>
			<div class="col-lg-12 title-top">
					<label class="search-label">商品名称:</label> <input type="text"
						id="title3" value="" class="form-control search-input width200"
						maxlength="21" placeholder="请输入商品名"> <label
						class="search-label">推荐状态:</label>
					<div class="search-input">
						<select id="rstate" class="selectpicker form-control">
							<option value="0" selected>全部</option>
							<option value="1">推荐</option>
							<option value="2">未推荐</option>
						</select>
					</div>
					<button class="btn btn-success search-btn" onclick="query();">确定</button>
					<button class="btn btn-success search-btn" onclick="reset();">重置</button>
						<button type="button"
							onclick="javascript:window.location.reload()"
							class="btn btn-success  btn-refresh pull-right">
							<span class="fa fa-refresh fa-lg"></span>
						</button>
						<button type="button" class="btn btn-success pull-right margin-lr"  onclick="toAdd(5)">
							<span class="fa fa-plus"></span> 选择商品
						</button>
						<button type="button" class="btn btn-success pull-right" onclick="doSort()">
							<span class="fa fa-save"></span> 保存排序
						</button>
						<button type="button" class="btn btn-success pull-right margin-lr" onclick="toEditAll()"><span class="fa "></span>推荐本页</button>
				</div>
				<div class="col-lg-12 title-top">
					<div class="col-lg-12">
						<div class="text-muted single-line-text pull-left">
							共 <font color="#428bca" id="dataCount">0</font> 条记录
							<h5 class="page-header">注意：如名字和ID为空，则为商品已下架，且仍在本专题！请删除</h5>
						</div>
					</div>

					<div class="col-lg-12">
						<form id="sortForm" action="${BASE_PATH}/spike/recommend/doSort"
							method="post">
							<input type="hidden" name="sortKey" value="orderNo">
							<table id="dataTable" class="table table-striped table-hover">
								<thead>
									<tr>
										<!-- <th><input type="checkbox" id="selectAll" /><span>全选</span><th> -->
										<!-- <th>多选</th> -->
										<th width="10%">编号</th>
										<th width="10%">商品属性</th>
										<th width="10%">商品ID</th>
										<th width="50%">商品名称</th>
										<th width="10%">是否推荐</th>
										<th width="10%" ><input type="checkbox" id="selectAll" /><span>全选</span></th>
										<th width="10%">排序</th>
										<!-- <th>状态</th> -->
										<th width="10%">操作</th>
									</tr>
								</thead>
								<tbody id="dataList"></tbody>
							</table>
						</form>
					</div>
						<div class="col-lg-12">
        			<div class = "pull-right">
	        			<div class="text-muted  pull-left" style="margin-top:20px; margin-right:18px;">
							<select id="pageSize" name="pageSize" class="selectpicker" data-width="100" onchange="query()" >
		    					<option value="10" selected = "selected">10条/页</option>
								<option value="15">15条/页</option>
								<option value="20">20条/页</option>
								<option value="50">50条/页</option>
								<option value="100">100条/页</option>
		    				</select>
						</div>
		        		<ul id="dataPagination" class="pagination-sm pull-right"></ul>
		        	</div>
	        	</div>
					</div>
		
	</div>
	<jsp:include page="../../../include/javascripts.jsp"></jsp:include>
	<!-- 异步加载下一页数据后，用模板渲染 -->
	<!-- <td><input type="checkbox" id="checkcode" name="checkcode" value="{{item.id}}" ></td> -->
	<script type="text/html" id="dataTpl">
{{each list as item}}

<tr id="item{{item.id}}" data-id="{{item.id}}">
		
		<td>{{item.id}}</td>
		<td>{{item.goodsType | flagTransform:1,'普通',2,'兑换'}}</td>
		{{if item.goodsType==1}}
			<td>{{item.goodsid}}</td>
		{{else item.goodsType==2}}
			<td>{{item.egeId}}</td>
		{{/if}}
		{{if item.goodsType==1}}
			<td>{{item.name}}</td>
		{{else item.goodsType==2}}
			<td>{{item.egeName}}</td>
		{{/if}}
		<td>{{item.recommend | flagTransform:1,'推荐',0,'不推荐'}}</td>
		<td><input type="checkbox" name="checkcode" value="{{item.id}}" style="height:20px;"></td>
		<td><input name="orderNo{{item.id}}" value="{{item.orderNo}}" size="3" class="order form-control width50" required></td>
 		<td><button type="button" class="btn btn-sm btn-primary btn-simple" onclick="toEdit('{{item.id}}')" title="推荐"><span class="fa fa-edit fa-lg"></span></button><button type="button" class="btn btn-sm btn-danger btn-simple" onclick="toDelete('{{item.id}}')" title="删除"><span class="fa fa-remove fa-lg">删除</span></button> 
</td>
	</tr>
	{{/each}}
	
</script>
	<script type="text/javascript">
		var dataPaginator;
		$(query);
		function query() {
			var pageSize=$("#pageSize").val();
			var params = {
				pageSize:pageSize,
				group : 5,
				title : $("#title3").val(),
				state : $("#rstate").val()
			};
			if (dataPaginator) {
				dataPaginator.destroy();
			}
			dataPaginator = Kit.pagination("#dataPagination",
					"${BASE_PATH}/spike/recommend/page", params, function(result) {
						/* console.log(result);
						console.log(result.object.totalRow); */
						//设置显示最新的数据数量
						$("#dataCount").html(result.object.totalRow);
						//根据模板渲染数据并填充
						$("#dataList").empty().append(
								template("dataTpl", result.object));
					});

		}
		function reset() {
			$("#title3").val("");
		}

		var addDialog
		function toAdd(group) {
		
			addDialog = Kit.dialog("选择商品",
					"${BASE_PATH}/spike/recommend/toAdd/" + group,{closable:true,size:'size-wide'}).open();
		}

		/* var addGoodsDialog;
		function toAddGoods(id) {
			addGoodsDialog = Kit.dialog("添加商品", "${BASE_PATH}/spike/list/toAddGoods/"+id).open();
		} */
		/* 实现全选和全不选 */
		$("#selectAll").on('click', function() {
			$("input[name='checkcode']").prop("checked", this.checked);

		});
		//批量推荐
		function toEditAll() {
			var adIds = "";  
			$("input:checkbox[name=checkcode]:checked").each(function(i){  
				if(0==i){  
					adIds = $(this).val();  
				}else{
					adIds += (","+$(this).val());  
				}
			}); 
			if(adIds==""){
				Kit.alert("请选择要推荐的商品");
			}else{
				$.post("${BASE_PATH}/spike/recommend/toEditAll?adIds="+adIds,function(result){
					if(result.flag==0){
						Kit.alert("推荐成功");
						onEditSuccess(result.object);
					}else{
						Kit.alert("操作失败");return;
					}
				});
			}
		}
		/* 异步刷新 */
		function onEditSuccess(newObject){
			$("#item"+newObject.id).replaceWith(template("dataTpl",{"list":[newObject]}));
		} 
		var editDialog
		function toEdit(id) {
			editDialog = Kit.dialog("置顶",
					"${BASE_PATH}/spike/recommend/toEdit/" + id).open();

		}

		function toDelete(id) {
			Kit.confirm("提示", "您确定要删除这条数据吗？", function() {
				$.post("${BASE_PATH}/spike/recommend/doDelete/" + id, function(
						result) {
					$("#item" + id).remove();
				});
			});
		}

		function doSort() {
			$("#sortForm").ajaxSubmit({
				success : function(data) {
					switch (data.flag) {
					case -1:
						Kit.alert("系统异常，请重试");
						return;
					case 0:
						window.location.reload();
					}
				}
			});
		}
		/* $(function() {
			$("#selectAll").click(function() {
				$(":checkbox[name='checkcode']").prop("checked", this.checked);
			});
		}); */

		/* function select() {
			$("#selectAll").click(function() {
				$("#checkcode").prop("checked", this.checked);
			});
		} */
	</script>
</body>
</html>